<template>
      <div id="jurisdiction">
            <page-title>
                  <span slot="pageName">权限管理</span>
            </page-title>
            <div class="btn">
                        <el-button class="addProject" type="primary" round @click="ShowDialog"  >添加角色分组</el-button>
            </div>
            <div class="table">
                    <el-table
                  :data="tableData"
                  style="width: 100%">
                        <el-table-column
                              label="角色ID"
                              prop="id"
                              align="center"
                              width="180">
                              
                        </el-table-column>
                        <el-table-column
                              label="角色名称"
                              prop="name"
                              align="center"
                              width="180">
                              
                        </el-table-column>
                        <el-table-column label="状态" align="center">
                              <template slot-scope="scope">
                                    <el-button
                                    size="mini"
                                    :type="scope.row.status == 1 ? 'success' : 'danger' "
                                    @click="StatusChange(scope.row)">{{ scope.row.status == 1 ? "开启" : "关闭"}}</el-button>
                              </template>     
                        </el-table-column>
                        <el-table-column label="权限配置" align="center">
                              <template slot-scope="scope">
                                    <el-button
                                    size="mini"
                                    type="primary"
                                    @click="handleEdit(scope.row)">权限配置</el-button>
                              </template>     
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                              <template slot-scope="scope">
                                    <el-button
                                    size="mini"
                                    type="primary"
                                    @click="authEdit(scope.row)">编辑</el-button>
                              </template>     
                        </el-table-column>
                  </el-table>
            </div>

            <auth-dialog :DialogData="DialogData" :FormData="FormData" @update="getAuth"></auth-dialog>
            <edit-auth :editData="editData" :roleData="roleData" @updated="getAuth"></edit-auth>
      </div>
</template>

<script>
      import PageTitle from "@/components/PageTitle"
      import AuthDialog from "@/components/dialog/AuthDialog"
      import EditAuth from "@/components/dialog/EditAuth"
      export default {
            components: {
                  PageTitle,
                  AuthDialog,
                  EditAuth,
            },
            data() {
                  return {
                        tableData: [],
                        DialogData: {
                              show: false,
                              title: ""
                        },
                        FormData: {},
                        editData: {
                              show: false,
                              title: ""
                        },
                        roleData: {}
                  }
            },
            computed: {
                  token() {
                        return localStorage.miniToken;
                  },
            },
            mounted() {
                  this.getAuth()
            },
            methods: {
                  // 编辑权限
                  handleEdit( raw ) {
                        this.editData = {
                              show: true,
                              title: "编辑权限"
                        }
                        this.roleData = {
                              id: raw.id,
                              rules: raw.rules
                        }
                  },
                  // 获取所有角色
                  async getAuth() {
                        let res = await this.$axios.post("/admin/role/auth_groupshow", { token: this.token })
                        this.tableData = res.data.data
                        console.log(res);
                        
                  },
                  // 添加权限
                  ShowDialog() {
                        this.DialogData = {
                              show: true,
                              title: "添加角色",
                              add: true,
                              edit: false
                        }
                        this.FormData = {
                              name: "",
                              status: ""
                        }
                  },
                  // 编辑角色
                  authEdit( row ) {
                        this.DialogData = {
                              show: true,
                              title: "编辑角色",
                              add: false,
                              edit: true
                        }
                        this.FormData = {
                              name: row.name,
                              status: row.status,
                              id: row.id,
                              
                        }
                  }
            }
      }
</script>

<style lang="scss" scoped>
.btn {
        text-align: left;
        margin-top: 30px;
  }
.addProject {
        float: right;
        margin: 10px 20px;
  }
</style>